<template>
<div class="searchcontent">
     <a-form layout="inline" :form="form">
          <a-row :gutter="24">
          <a-col v-for="fieldOptions in serchFormColums" :span="8" :key="fieldOptions">
               <a-form-item
                :key="fieldOptions"
                :label="fieldOptions.labelText" 
                >
            <a-input
                v-if="fieldOptions.fieldName && fieldOptions.type === 'text'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-select
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'select'"
                style="width: 200px"
                showSearch
                :options="fieldOptions.options"
                :filterOption="selectFilterOption"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                allowClear
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : undefined,
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-input-number
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'number'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                :min="fieldOptions.min ? fieldOptions.min : 1"
                style="width: 100%"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            </a-form-item>
          </a-col>
          <a-col :span="8">
                <a-button type="primary" @click="handleSubmit">提交</a-button>

                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
         </a-col>
      </a-row>
    </a-form>
</div>
</template>
<script>
export default {
    name:'SearchForm',
    props:{
        // fieldOptions:{
        //    type: Object,
        //     default: function() {
        //     return {};
        //     }  
        // }
        serchFormColums:{
            type: Array
        }
    },
    data(){
        return{
            form:this.$form.createForm(this),
        }
    },
    methods: {
        handleSubmit(){
             this.form.validateFields((err, values) => {
            //    console.log(values)
               this.$emit('SearchSubmit',values)
            });
        },
        resetSearchForm(){
            this.form.resetFields();
        }
    },
}

</script>
<style lang="less" scoped>
    .searchcontent{
        margin: 20px 0;
    }
</style>
